<template>
    <div class="about">
      <el-button type="primary" icon="el-icon-circle-plus"  @click="addbtn()">添加</el-button>
        <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
            prop="submodule"
            label="所属模块"
            width="180">
        </el-table-column>
    <el-table-column
        prop="question"
        label="问题">
    </el-table-column>
    <el-table-column
        prop="answer"
        label="回答">
         <template slot-scope="scope" >
            <div v-html="scope.row.answer"></div>
        </template>
    </el-table-column>
    <el-table-column
        prop="addtime"
        label="添加时间"
         sortable>
        <template slot-scope="scope">
            {{scope.row.addtime | dateFilter("yyyy-mm-dd")}}
        </template>
    </el-table-column>
     <el-table-column label="操作" width="250px" fixed="right">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="success"
          @click="handleEdit(scope.row)">编辑</el-button> 
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
    </el-table>
    <!-- 页码组件开始 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[2,3,5,10,100, 200, 300, 400]"
      :page-size="pageSize"
      layout="total,sizes,prev,pager,next,jumper"
      :total="total">
    </el-pagination>
    <!-- 页码组件end -->

     <!--添加弹出框-->
            <el-dialog :title="title" :visible.sync="addFormVisible" >
                <el-form :model="form" :rules="rules" ref="form" :inline="true" label-width="200px " class="demo-ruleForm">
                    <el-form-item label="所属模块" prop="submodule">
                        <el-input v-model="form.submodule" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="问题" prop="question">
                        <el-input v-model="form.question" autocomplete="off"></el-input>
                    </el-form-item>
                     <el-form-item label="答案" prop="answer">
                        <el-input type="textarea" :rows="5" :cols="80" v-model="form.answer" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="addFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="add()">确 定</el-button>
                </div>
              </el-dialog>
    </div>
</template>
 <script>
    export default {
      data() {
        return {
          tableData: [],
          currentPage:1,//当前页面，默认1
          pageSize:5,//每页显示条数
          total:100,
          addFormVisible:false,
          title:'',
          seen:false,
          form:{},
          rules: {
            submodule: [
              { required: true, message: '请输入所属模块', trigger: 'blur' }
            ],question:[
              { required: true, message: '请输入问题', trigger: 'blur' }
            ],answer:[
              { required: true, message: '请输入答案', trigger: 'blur' }
            ]
          }
        }
      },created:function(){
        this.loadData();
            },
    methods: {
        loadData(){
          this.$http.post("/api/mks/customerIssues/queryAll?pageNo="+this.currentPage+"&pageSize="+this.pageSize,{name:null}).then((response) => {
             if(response.data.code==2000){
               console.log(response.data)
                this.tableData = response.data.data.list;
                this.total = response.data.data.total;
              } 
        })        
    }, handleSizeChange(val) {
                    // console.log(`每页 ${val} 条`);
                    this.pageSize=val;
                    this.loadData();
       },
     handleCurrentChange(val) {
              // console.log(`当前页: ${val}`);
              this.currentPage=val;
              this.loadData();
      },addbtn(){
        this.form={};
        this.seen=true;
         this.title="添加";
        this.addFormVisible=true; 
       
          this.$refs.form.resetFields();
        
      },handleEdit(row){
        var _row=row
        if(row.status==1){
          _row.status=-1
        }else if(row.status==0){
          _row.status=-2
        }
         this.form =  JSON.parse(JSON.stringify(_row))
        //this.form=_row;
        console.log(this.form)
        this.seen=false;
        this.title="修改";
        this.addFormVisible=true;
      },add:function(){
                   var _this =this;
                   if(this.seen){
                      this.$refs.form.validate((valid) => {
                        if (valid) {
                          this.$http.post("/api/mks/customerIssues/insert",this.form).then((response) => {
                              // console.log(response);
                          if(response.data.code==2000){
                              //提示成功
                              _this.$message({
                                  type: 'success',
                                  message: '添加成功!'
                              });
                              //关闭弹框
                              _this.addFormVisible=false;
                              //重新加载数据
                              _this.loadData();
                          }
                        }).catch(function (error) {
                                  console.log(error);
                                  this.$message.error("你错了。。。") 
                        })
                      } else {
                        // console.log('error submit!!');
                        return false;
                      }
                    })
                   
                  }else{
                    // this.form.status='';
                    // console.log(this.form)
                  this.$refs.form.validate((valid) => {
                      if (valid) {
                         this.$http.put('api/mks/customerIssues/update',this.form).then(function (response) {
                            // console.log(response);
                            if(response.status == 200&&response.data.code==2000){
                                    //提示成功
                                   _this.$message({
                                        type: 'success',
                                        message:'修改成功!'
                                    });
                                    _this.loadData();
                                    _this.addFormVisible=false;
                                    }}
                          ).catch(function (error) {
                              console.log(error);
                              _this.$message.error("你错了。。。") 
                        })
                      } else {
                        // console.log('error submit!!');
                        this.loadData();
                        return false;
                      }
                  });                
                } 
              },
                 //删除
                 handleDelete(row){
                   this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                     confirmButtonText: '确定',
                     cancelButtonText: '取消',
                     type: 'warning'
                         }).then(() => {
                             var _this=this;
                          this.$http.delete('api/mks/customerIssues/deleteById?id='+row.id).then(function (response) {
                            console.log(response);
                            
                            if(response.status == 200&&response.data.code==2000){
                                    //提示成功
                                   _this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    });
                                    _this.currentPage=1;
                                    _this.loadData();
                                    }}
                        ).catch(function (error) {
                            console.log(error);
                            this.$message.error("你错了。。。") 
          })   
                        }).catch(() => {
                            this.$message({
                             type: 'info',
                             message: '已取消删除'
                         });          
                     });
                 }
  },filters: {
        //时间格式处理
        dateFilter: function (data, format = "") {
            var dt = new Date(data);
            var y = dt.getFullYear();
            var m = (dt.getMonth()+1).toString().padStart(2,"0");
            var d = dt.getDate().toString().padStart(2,"0");
            var h = dt.getHours().toString().padStart(2,"0");
            var mm = dt.getMinutes().toString().padStart(2,"0");
            var s = dt.getSeconds().toString().padStart(2,"0");
            if (format.toLocaleLowerCase() === "yyyy-mm-dd" ||
                format.toLocaleLowerCase() === "") {
                return `${y}-${m}-${d}`;
            } else if (format.toLocaleLowerCase() === "yyyy/mm/dd") {
                return `${y}/${m}/${d}`;
            } else if (format.toLocaleLowerCase() === "yyyy-mm-dd hh:mm:ss") {
                return `${y}-${m}-${d} ${h}:${mm}:${s}`;
            } else if (format.toLocaleLowerCase() === "yyyy/mm/dd hh:mm:ss") {
                return `${y}/${m}/${d} ${h}:${mm}:${s}`;
            } else {
                return `输入的时间格式有误`;
            }
        }
  }
}
 </script>
 